<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Braintree Checkout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="/css/app.css" th:href="@{/css/app.css}" />
    <link rel="icon" type="image/png" href="/images/favicon.png" th:href="@{/images/favicon.png}"/>
</head>
<body>
  <header class="main">
    <div class="container wide">
      <div class="content slim">
        <div class="set">
          <div class="fill">
            <a class="pseudoshop" href="/">PSEUDO<strong>SHOP</strong></a>
          </div>

          <div class="fit">
            <a class="braintree" href="https://developers.braintreepayments.com/guides/drop-in" target="_blank">Braintree</a>
          </div>
        </div>
      </div>
    </div>
    <div class="notice-wrapper">
      <div class="show notice error notice-error" th:if="${errorDetails}">
        <span class="notice-message" th:text="${errorDetails}"></span>
      </div>
    </div>
  </header>

  <div class="wrapper">
    <div class="checkout container">

      <header>
        <h1>Hi, <br />Let's test a transaction</h1>
        <p>
          Make a test payment with Braintree using PayPal or a card
        </p>
      </header>

      <form id="payment-form" method="post" action="/checkouts">
        <section>
          <label for="amount">
            <span class="input-label">Amount</span>
            <div class="input-wrapper amount-wrapper">
              <input id="amount" name="amount" type="tel" min="1" placeholder="Amount" value="10" />
            </div>
          </label>

          <div class="bt-drop-in-wrapper">
            <div id="bt-dropin"></div>
          </div>
        </section>

        <input type="hidden" id="nonce" name="payment_method_nonce" />
        <button class="button" type="submit"><span>Test Transaction</span></button>
      </form>
    </div>
  </div>

  <script src="https://js.braintreegateway.com/web/dropin/1.26.0/js/dropin.min.js"></script>
  <script th:inline="javascript">
    /*<![CDATA[*/
    var form = document.querySelector('#payment-form');
    var client_token = [[${clientToken}]];

    braintree.dropin.create({
      authorization: client_token,
      container: '#bt-dropin',
      paypal: {
        flow: 'vault'
      }
    }, function (createErr, instance) {
      form.addEventListener('submit', function (event) {
      event.preventDefault();

      instance.requestPaymentMethod(function (err, payload) {
        if (err) {
          console.log('Error', err);
          return;
        }

        // Add the nonce to the form and submit
        document.querySelector('#nonce').value = payload.nonce;
          form.submit();
        });
      });
    });
    /*]]>*/
  </script>
  <script src="/javascript/demo.js" th:src="@{/javascript/demo.js}"></script>
</body>
</html>
